<template>
  <div>
    <li :style="{opacity}">小光同志</li>
    <h3>轮播图 <input type="text"></h3>
    <h3>轮播图 <input type="text"></h3>
    <h3>轮播图 <input type="text"></h3>
  </div>
</template>

<script>
import {onDeactivated} from "vue";

export default {
  name: "H_News",
  data() {
    return {
      opacity: 0.5
    }
  },
  methods: {
    set() {
      var a = "-"
      //通过外部的定时器实现（不推荐)
      this.trimer = setInterval(() => {
        if (this.opacity <= 0) {
          a = "+"
        } else if (this.opacity >= 1) {
          a = "-"
        }
        if (a == "+") {
          this.opacity += 0.005
        } else {
          this.opacity -= 0.005
        }
        console.log("1")
      }, 1000 / 120)
    }
  },
  // mounted() {
  //   this.set()
  // },
  // beforeDestroy() {
  //   console.log("News即将销毁")
  //   clearInterval(this.trimer)
  // },
  activated() {//组件被激活
    this.set()
  },
  deactivated() {//组件退出显示
    console.log("News退出显示")
    clearInterval(this.trimer)
    // this.$nextTick(function (){
    //   //$nextTick 下一次渲染dom元素
    // })
  }

}
</script>

<style scoped>

</style>